import React, { useRef, useState, useEffect } from "react";
import { Spin, Tooltip, } from "antd";
import _ from "lodash";
import { useNavigate } from "react-router-dom";
import * as antdHelper from "@utils/antd-helper";
import api from "@services";
import moment from "moment";
import { formatAddress, formatAddressLong, formatterCurrencyStr2,formatterCurrencyStr3 } from "@utils/format";
import copy from "copy-to-clipboard";

import styled from "styled-components";


const Main = ({ className, miners }) => {
	const navigate = useNavigate();
	const [loading, setLoading] = useState(false);
	const [list, setList] = useState([]);

	const loadList = async () => {
		setLoading(true);
		let res = await api.transfer.list({ pageindex: 1, pagesize: 5 });
		setLoading(false);
		if (res.msg != 'ok') {
			return antdHelper.alert(res.msg);
		}
		setList(res.data);
	}
	useEffect(() => {
		loadList();
	}, []);

	return (
		<div className={className}>
			<Spin spinning={loading}>
				<div className="list" data-api-url="/block/query/extrinsics?pageindex=1&pagesize=10">
					{list.map((t, index) => (
						<div className="item" key={index}>
							<div className="i1">
								<div className="img-box">
									<img width={30} height={30} src={process.env.PUBLIC_URL + "/img/list.png"} />
								</div>
								<div className="txt-box">
									<span className="pointer" onClick={() => navigate('/extrinsic/' + t.extrinsic_hash)}><Tooltip title={t.extrinsic_hash}>{formatAddress(t.extrinsic_hash)}</Tooltip></span>
									<label>{moment(t.timestamp).fromNow()}</label>
								</div>
							</div>
							<div className="i2">
								<span onClick={() => navigate('/account/' + t.from)}>
									From&nbsp;<Tooltip title={t.from}><font className="pointer">{formatAddress(t.from)}</font></Tooltip>
								</span>
								<label onClick={() => navigate('/account/' + t.to)}>									
										To&nbsp;<Tooltip title={t.to}><font className="pointer">{formatAddress(t.to)}</font></Tooltip>
								</label>
							</div>
							<div className="i3"><Tooltip title={formatterCurrencyStr3(t.amount)}>{formatterCurrencyStr2(t.amount)} CESS</Tooltip></div>
						</div>
					))}
				</div>
				<div className="btn" onClick={() => navigate('/transfer/')}>View All Transfers</div>
			</Spin>
		</div>
	);
};

export default React.memo(styled(Main)`
	display: block;
	overflow: hidden;	
	@media screen and (max-width: 650px) {
		.item {
			padding: 20px 10px !important;
			.i1 {
				width: auto !important;
			}
			.i2 span,
			.i2 label {
				text-align: right !important;
			}
			.i3,
			.img-box {
				display: none !important;
			}
		}
	}
	.list {
		display: flex;
		flex-direction: column;
		.item {
			display: flex;
			flex-direction: row;
			padding: 20px;
			justify-content: space-between;
			height: 50px;
			border-bottom: 1px solid #ddd;
			align-items: center;
			.i1 {
				width: 35%;
				display: flex;
				flex-direction: row;
				align-items: center;
				.img-box {
					background-color: #f4f4f4;
					padding: 11px 13px;
					border-radius: 5px;
					margin-right: 10px;
					img {
						width: 24px;
						height: 24px;
					}
				}
				.txt-box {
					display: flex;
					flex-direction: column;
					span {
						font-size: 16px;
						color: #0057ff;
						line-height: 20px;
					}
					label {
						color: #6b7486;
						line-height: 18px;
						font-size: 14px;
					}
				}
			}
			.i2 {
				flex: 1;
				line-height: 20px;
				font {
					color: #0057ff;
				}
				span {
					font-size: 14px;
					color: #282e39;
					display: block;
					clear: both;
				}
				label {
					display: block;
					clear: both;
					font-size: 14px;
					color: #282e39;
				}
			}
			.i3 {
				padding: 0 10px;
				height: 28px;
				line-height: 28px;
				background-color: rgba(255, 255, 255, 1);
				border-width: 1px;
				border-style: solid;
				border-color: rgba(221, 221, 221, 1);
				border-radius: 5px;
				color: #282e39;
				text-align: center;
				font-size: 13px;
			}
		}
	}
	.btn {
		width: 100%;
		display: block;
		text-align: center;
		height: 68px;
		line-height: 68px;
		background-color: #000;
		font-size: 14px;
		color: #ffffff;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
		cursor: pointer;
	}
	.btn:hover {
		background-color: #222;
	}
`);
